<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
import { getMedicalOrderLogistics } from "@/apis/order"
import type { ExpressData } from "@/types/order"
import { onMounted, onUnmounted, ref } from "vue"
// 导入图标资源
import carImg from "@/static/images/car.png"
import startImg from "@/static/images/start.png"
import endImg from "@/static/images/end.png"

// #ifdef APP || H5
import AMapLoader from "@amap/amap-jsapi-loader"
let map: any = null
const initAMap = async () => {
  // 初始化地图
  window._AMapSecurityConfig = {
    securityJsCode: "016019f397fe8dc472c56a352a23ab63", // 申请好的安全密钥
  }
  const AMap = await AMapLoader.load({
    key: "c293756b60912cde4a4ecff63f910f3f", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })

  // 设置地图容器id （这里地图容器的id为 map）
  map = new AMap.Map("map", {
    viewMode: "2D", // 是否为3D地图模式
    // zoom: 11, // 初始化地图级别
    // center: [116.397428, 39.90923], // 初始化地图中心点位置
  })
  // 加载驾驶导航插件
  AMap.plugin("AMap.Driving", () => {
    const driving = new AMap.Driving({
      map: map, // 指定轨迹显示地图示例
      showTraffic: false, // 关闭交通状态
      mapStyle: "amap://styles/whitesmoke", // 设置地图样式
      hideMarkers: true, // 隐藏默认标记
    })
    // // 开始位置坐标
    // const startLngLat = [116.379028, 39.865042]
    // // 结束位置坐标
    // const endLngLat = [116.427281, 39.903719]
    // driving.search(startLngLat, endLngLat, (status: string, result: object) => {
    //   console.log(status, result)
    // })

    // 替换真实物流坐标数据
    // 起始坐标, 终点坐标, 途径坐标, 回调函数
    const start = logisticsInfo.value.logisticsInfo.shift()
    const end = logisticsInfo.value.logisticsInfo.pop()
    const road = logisticsInfo.value.logisticsInfo.map((item) => {
      return [item.longitude, item.latitude]
    })

    driving.search(
      [start?.longitude, start?.latitude],
      [end?.longitude, end?.latitude],
      {
        waypoints: road,
      },
      (status: string, result: object) => {
        // console.log(status, result)
      }
    )
    // 自定义开始位置图片
    const startMarker = new AMap.Marker({
      icon: startImg, // 设置自定义图片
      position: [start?.longitude, start?.latitude], // 图片显示的坐标位置
      anchor: "bottom-center", // 设置基于坐标点显示的位置
    })
    map?.add(startMarker)
    // 自定义结束位置图片
    const endMarker = new AMap.Marker({
      icon: endImg, // 设置自定义图片
      position: [end?.longitude, end?.latitude], // 图片显示的坐标位置
      anchor: "bottom-center", // 设置基于坐标点显示的位置
    })
    map?.add(endMarker)
    const carMarker = new AMap.Marker({
      icon: carImg, // 覆盖物图片
      position: [
        logisticsInfo.value.currentLocationInfo.longitude,
        logisticsInfo.value.currentLocationInfo.latitude,
      ], // 图片显示的坐标位置
      anchor: "center",
    })
    map?.add(carMarker)
    // 2秒后定位到火车当前位置
    setTimeout(() => {
      map.setFitView([carMarker]) // 设置中心点
      map.setZoom(10) // 设置地图缩放级别
    }, 2000)
  })
}
// #endif

// 1. 查询物流详情
// 获取地址参数
const pageParams = defineProps<{ id: string }>()
// 当前位置
const logisticsInfo = ref<ExpressData>({} as ExpressData)
// 查看物流信息
const getLogistics = async () => {
  // 调用接口
  const res = await getMedicalOrderLogistics(pageParams.id)
  // 渲染数据
  logisticsInfo.value = res
}

onMounted(async () => {
  // 获取物流信息
  await getLogistics()
  // #ifdef APP || H5
  initAMap()
  // #endif
})

onUnmounted(() => {
  // #ifdef APP || H5
  map?.destroy()
  // #endif
})
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 (地图容器)-->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">订单派送中</cover-view>
      <cover-view class="extra">
        预计{{ logisticsInfo.estimatedTime }}送达 {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址：广东省广州市大华区明离路科技园880号
          </view>
        </view>
        <!--
          1	已发货	类名 .dot，无图标
          2	已揽件	类名 .dot，无图标
          3	运输中	类名 .dot，无图标
          4	派送中	类名 .icon，图标 icon-truck
          5	已签收	类名 .icon，图标 icon-checked
        -->
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons
              custom-prefix="iconfont"
              color="#2cb5a5"
              size="15"
              type="icon-truck"
            />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons
              custom-prefix="iconfont"
              color="#2cb5a5"
              size="15"
              type="icon-checked"
            />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content"> {{ item.content }} </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
